<template name="billingOverview">
  <div class="panel panel-default billing-module">
    <div class="panel-heading">
      <h3 class="panel-title">Billing Overview</h3>
    </div>
    <div class="panel-body">
      <ul class="list-group">
        <!--
          We just map out each type here so we don't have a bunch of tangled state.
          Wire this up as you see fit. Just make sure to account for each status type you need :)
        -->
        <!-- TODO: change Trialing to real trial status provided by Braintree, needs subscription testing -->
        {{#if equals plan.subscription.status "Trialing"}}
          <li class="list-group-item list-group-item-info">
            <p>You're trialing Todoodle until {{niceBtDate plan.subscription.ends}}. <a href="#" class="cancel-subscription">Cancel Subscription</a>.</p>
          </li>
        {{/if}}
        {{#if equals plan.subscription.status "Active"}}
        <li class="list-group-item list-group-item-success">
          <p>Your subscription is currently active! <a href="#" class="cancel-subscription">Cancel</a>.</p>
        </li>
        {{/if}}
        {{#if equals plan.subscription.status "Canceled"}}
        <li class="list-group-item list-group-item-danger">
          <p>Your subscription will end on {{niceBtDate plan.subscription.ends}}. Change of heart? <a href="{{pathFor 'billingResubscribe'}}">Resubscribe</a>.</p>
        </li>
        {{/if}}
        <li class="list-group-item bm-block clearfix">
          <span class="bm-block-label">Current Plan</span>
          <div class="bm-block-content">
            <span class="plan-name-quota"><strong>{{capitalize plan.subscription.plan.name}}</strong> &mdash; {{plan.subscription.plan.used}} of {{plan.limit}} used</span>
            <div class="usage-bar">
              <div class="used" style="width:{{percentage plan.subscription.plan.used plan.limit}};"></div>
            </div>
          </div>
          {{#if equals plan.subscription.status "Canceled"}}
            <a href="{{pathFor 'billingResubscribe'}}" class="btn btn-small btn-default pull-right">Resubscribe</a>
          {{else}}
            <a href="{{pathFor 'billingPlan'}}" class="btn btn-small btn-default pull-right">Change Plan</a>
          {{/if}}
        </li>
        <li class="list-group-item bm-block clearfix">
          <span class="bm-block-label">Payment</span>
          <div class="bm-block-content">
            <span><strong>{{plan.subscription.payment.card.type}}</strong> &mdash; {{plan.subscription.payment.card.lastFour}}</span>
            {{#unless equals plan.subscription.status "Canceled"}}
              <span>Next payment due: <strong>{{niceBtDate plan.subscription.payment.nextPaymentDue}}</strong></span>
              <span>Amount: <strong>{{plan.amount}}</strong></span>
            {{/unless}}
          </div>
          <a href="{{pathFor 'billingCard'}}" class="btn btn-small btn-default pull-right">Update Card</a>
        </li>
      </ul>
    </div>
  </div>
</template>
